<script lang="ts" setup>
import type { CommentApi } from '#/api/wedding/comment';

import { computed, onMounted, ref } from 'vue';

import { Avatar, Progress, Rate } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

import { getCommentStats } from '#/api/wedding/comment';

const props = defineProps<{
  targetId: number;
  targetType: 'dress' | 'makeupartist' | 'package' | 'photographer';
}>();

const loading = ref(false);
const stats = ref<CommentApi.CommentStats>({
  totalCount: 0,
  averageRating: 0,
  ratingDistribution: [],
  recentComments: [],
});

// 加载统计数据
async function loadStats() {
  try {
    loading.value = true;
    const result = await getCommentStats(props.targetType, props.targetId);
    stats.value = result;
  } catch (error) {
    console.error('加载评论统计失败:', error);
  } finally {
    loading.value = false;
  }
}

// 评分分布
const ratingDistribution = computed(() => {
  return stats.value.ratingDistribution || [];
});

// 平均评分
const averageRating = computed(() => {
  return stats.value.averageRating || 0;
});

// 总评论数
const totalCount = computed(() => {
  return stats.value.totalCount || 0;
});

// 格式化目标类型显示
function formatTargetType(type: string) {
  const typeMap: Record<string, string> = {
    dress: '婚纱',
    makeupartist: '化妆师',
    package: '套餐',
    photographer: '摄影师',
  };
  return typeMap[type] || type;
}

onMounted(() => {
  loadStats();
});
</script>

<template>
  <div class="comment-stats">
    <!-- 评分概览 -->
    <div class="mb-6 rounded-lg bg-white p-6 shadow-sm">
      <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
        <IconifyIcon icon="lucide:star" class="text-yellow-500" />
        {{ formatTargetType(targetType) }}评分统计
      </h3>

      <div class="flex items-center gap-4">
        <div class="text-center">
          <div class="text-3xl font-bold text-yellow-500">
            {{ averageRating.toFixed(1) }}
          </div>
          <Rate :value="averageRating" disabled allow-half />
          <div class="mt-1 text-sm text-gray-500">
            基于 {{ totalCount }} 条评论
          </div>
        </div>

        <div class="flex-1">
          <div class="space-y-2">
            <div
              v-for="item in ratingDistribution"
              :key="item.rating"
              class="flex items-center gap-3"
            >
              <span class="w-8 text-sm text-gray-600">{{ item.rating }}星</span>
              <Progress
                :percent="item.percentage"
                :show-info="false"
                stroke-color="#f59e0b"
                size="small"
                class="flex-1"
              />
              <span class="w-8 text-sm text-gray-500">{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近评论 -->
    <div
      v-if="stats.recentComments && stats.recentComments.length > 0"
      class="rounded-lg bg-white p-6 shadow-sm"
    >
      <h3 class="mb-4 flex items-center gap-2 text-lg font-semibold">
        <IconifyIcon icon="lucide:message-circle" />
        最近评论
      </h3>

      <div class="space-y-4">
        <div
          v-for="comment in stats.recentComments.slice(0, 3)"
          :key="comment.id"
          class="flex items-start gap-3"
        >
          <Avatar :src="comment.userAvatar" :size="32">
            {{ comment.userName?.charAt(0) }}
          </Avatar>

          <div class="flex-1">
            <div class="mb-1 flex items-center gap-2">
              <span class="text-sm font-medium">{{ comment.userName }}</span>
              <Rate :value="comment.rating" disabled size="small" />
            </div>
            <p class="line-clamp-2 text-sm text-gray-600">
              {{ comment.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.comment-stats {
  @apply w-full;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
